<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<script type="text/javascript">
	$('#editResRoomSelect').change(function() {
		var selectedValue = $('#editResRoomSelect').val(); // form: cost::roomNumber
		var cost = parseInt(selectedValue.split('::')[0], 10);
		var duration = parseInt($('#editNumOfDays').html(), 10);
		var total = cost * duration;
		$('#editRes_totalCost').html(total);
		$('#editRes_costPerNight').html(cost);
		$('#newCost').val(total);
	});
	
	function validReservation() {
		// it'll pretty much always be valid right now since the only editable 
		// thing is room number, which is controlled to be valid.
		return true;
	}
</script>

<div id="editReservationDiv">
	<form id="editReservationForm" action="controller" method="post">
		<input type="hidden" name="source" value="updateRes" />
		<input type="hidden" name="id" value="<c:out value="${reservEdit.reservationId}" />" />
		<input type="hidden" id="newCost" name="totalCost" value="<c:out value="${reservEdit.totalCost}" />" />
		
		<!-- Hotel Select -->
		<table id="editResFormTable">
			<tr>
				<td>Hotel: </td>
				<td><c:out value="${reservEdit.hotelName}" /></td>
			</tr>
			<tr>
				<!-- Room Select - must depend on hotel and dates -->
				<td>Room Select: </td>
				<td>
					<select name="room" size="1" id="editResRoomSelect">
						<option value="<c:out value="${reservEdit.totalCost / reservEdit.numOfDays}::${reservEdit.roomNumber}" />" selected><c:out value="${reservEdit.roomNumber}" /> (Current)</option>
						<c:forEach items="${availableRooms}" var="rm">
							<option value="${rm.costPerNight}::${rm.roomNumber}"><c:out value="${rm.roomNumber}" /> (fits <c:out value="${rm.occupancy}" /> people, $<c:out value="${rm.costPerNight}" /> /night)</option>
						</c:forEach>
					</select>
				</td>
			</tr>
		
			<tr>
				<!-- Start Date -->
				<td>Start Date: </td>
				<td><c:out value="${reservEdit.startDate}" /></td>
			</tr>
			<tr>
				<!-- Number of Days -->
				<td>Number of Days: </td>
				<td><span id="editNumOfDays"><c:out value="${reservEdit.numOfDays}" /></span></td>
			</tr>
			<tr>
				<!-- Number of People -->
				<td>Number of People: </td>
				<td><c:out value="${reservEdit.numOfPeople}" /></td>
			</tr>
			
			<tr>
				<!-- Updating total cost, changing when number of days or room changes -->
				<td>Total Cost: </td>
				<td>$<span id="editRes_totalCost"><c:out value="${reservEdit.totalCost}" /></span></td>
			</tr>
		</table>
	</form>
</div>